<template>
  <el-row class="mb-4">
    <el-input v-model="searchName" placeholder="请输入姓名进行搜索" clearable @clear="handleClear"></el-input>
  </el-row>
  <el-row class="mb-4">
    <el-button plain @click="add">新增用户</el-button>
  </el-row>
  <el-table :data="paginatedTableData" style="width: 100%">
    <el-table-column prop="number" label="用户编号" align="center"/>
    <el-table-column prop="name" label="用户名称" align="center"/>
    <el-table-column prop="dept" label="部门" align="center"/>
    <el-table-column prop="phone" label="手机号码" align="center"/>
    <el-table-column prop="date" label="创建时间" align="center"/>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >修改</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :total="filteredTableData.length"
      :page-size="pageSize"
      @current-change="handlePageChange"
      layout="prev, pager, next"
  ></el-pagination>
  <el-dialog v-model="dialogFormVisible" title="修改">
    <el-form>
      <el-form-item label="用户编号" :label-width="formLabelWidth">
        <el-input v-model="form.number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门" :label-width="formLabelWidth">
        <el-input v-model="form.dept" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号码" :label-width="formLabelWidth">
        <el-input type="number" v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.date" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="updateUserInfo">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const formLabelWidth = '140px'

const searchName = ref('');

const handleClear = () => {
  searchName.value = '';
};
import { computed } from 'vue';

const filteredTableData = computed(() => {
  if (searchName.value === '') {
    return tableData.value;
  } else {
    return tableData.value.filter((item) => {
      return item.name.toLowerCase().includes(searchName.value.toLowerCase());
    });
  }
});



const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    number: '1',
    dept: '中科融保',
    phone: '15977130316'
  },
  {
    date: '2022-09-20',
    name: 'Alice',
    number: '5',
    dept: '人力资源部',
    phone: '18812345678'
  },
  {
    date: '2022-09-21',
    name: 'Bob',
    number: '2',
    dept: '市场部',
    phone: '18898765432'
  },
  {
    date: '2022-09-22',
    name: 'Catherine',
    number: '9',
    dept: '财务部',
    phone: '18856789012'
  },
  {
    date: '2022-09-23',
    name: 'David',
    number: '3',
    dept: '技术部',
    phone: '18811112222'
  },
  {
    date: '2022-09-24',
    name: 'Emily',
    number: '7',
    dept: '客户服务部',
    phone: '18833334444'
  }
])


const form = reactive({
  number: '',
  name: '',
  dept: '',
  phone: '',
  date: ''
});
const dialogFormVisible = ref(false)
//记录索引
const num = ref(0)
const handleEdit = (index, row) => {
  Object.assign(form, row);
  num.value = index
  console.log(num.value);
  dialogFormVisible.value = true;
}

const updateUserInfo = () => {
  if (num.value==null){
    tableData.value.push({
      date: form.date,
      name: form.name,
      number: form.number,
      dept: form.dept,
      phone: form.phone
    });
    dialogFormVisible.value = false;
  }else {
    tableData.value[num.value].date = form.date;
    tableData.value[num.value].name = form.name;
    tableData.value[num.value].dept = form.dept;
    tableData.value[num.value].phone = form.phone;
    tableData.value[num.value].number = form.number;
    console.log(tableData.value[num.value])
    dialogFormVisible.value = false;
  }

};

const add = ()=>{
  num.value = null
  form.name = ''
  form.date = new Date().toLocaleDateString().replace(/\//g, '-')
  form.dept = ''
  form.phone = ''
  form.number = ''
  dialogFormVisible.value = true;
}
const handleDelete = (index, row) => {
  console.log(index, row);
  // 从tableData数组中删除指定的行数据
  tableData.value.splice(index, 1);
  console.log(tableData.value);
  const newData = [...tableData.value];
  // 将新数组赋值给tableData
  tableData.value = newData;
}


const pageSize = 5;
const currentPage = ref(1);

const handlePageChange = (page) => {
  currentPage.value = page;
};

const paginatedTableData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return filteredTableData.value.slice(startIndex, endIndex);
});


</script>
<style scoped>
.el-table th, .el-table td {
  text-align: center;
}

.el-table-column .cell {
  text-align: center;
}

</style>